<template>
    <el-form ref="registerForm" :model="registerFormData" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="账号" :error="joinToString(registerFormErrors.account||'')"
                      prop="account">
            <el-input v-model="registerFormData.account" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item v-if="registerNeedMobile" label="手机号" :error="joinToString(registerFormErrors.mobile||'')"
                      prop="mobile">
            <el-input v-model="registerFormData.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="registerCheckMobile" label="手机验证码"
                      :error="joinToString(registerFormErrors.code_mobile_val||'')">
            <input-captcha-sms :send-to="registerFormData.mobile"
                               tpl="captcha_mobile_register"
                               v-on:change="(code_id,code_val)=>{registerFormData.code_mobile_id=code_id;registerFormData.code_mobile_val=code_val;}"></input-captcha-sms>
        </el-form-item>

        <el-form-item v-if="registerNeedEmail" label="电子邮箱" :error="joinToString(registerFormErrors.email||'')"
                      prop="email">
            <el-input v-model="registerFormData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="registerCheckEmail" label="邮箱验证码"
                      :error="joinToString(registerFormErrors.code_email_val||'')">
            <input-captcha-email :send-to="registerFormData.email"
                                 tpl="captcha_email_register"
                                 v-on:change="(code_id,code_val)=>{registerFormData.code_email_id=code_id;registerFormData.code_email_val=code_val;}"></input-captcha-email>
        </el-form-item>

        <el-form-item label="密码" :error="joinToString(registerFormErrors.password||'')"
                      prop="password">
            <el-input type="password" v-model="registerFormData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" :error="joinToString(registerFormErrors.password_confirm||'')"
                      prop="password_confirm">
            <el-input type="password" v-model="registerFormData.password_confirm"
                      autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名/昵称" :error="joinToString(registerFormErrors.name||'')"
                      prop="name">
            <el-input v-model="registerFormData.name" autocomplete="off"></el-input>
        </el-form-item>


        <el-button type="primary" class="btn-block" @click="authRegister()">注 册</el-button>
    </el-form>
</template>

<script>
    import ApiAuth from '../services/api-auth'

    export default {
        components: {},
        props: {

            formLabelWidth: {
                type: String,
                default: '120px'
            },
            authGuard: {
                type: String,
                default: 'api'
            },
            dataGuardConfig: {
                type: Object,
                default: function () {
                    return {}
                }
            },
        },

        data() {
            var validatePasswordConfirm = (rule, value, callback) => {
                if (value !== this.registerFormData.password) {
                    callback(new Error('两次密码输入不一致'));
                }
                callback();
            };
            var validateEmailIfNotNull = (rule, value, callback) => {
                if (value !== '') {
                    return LeValidator.validateEmail(rule, value, callback);
                }
                callback();
            };
            var validateMobileIfNotNull = (rule, value, callback) => {
                if (value !== '') {
                    return LeValidator.validateMobile(rule, value, callback);
                }
                callback();
            };
            return {
                registerFormData: {
                    account: '',
                    mobile: '',
                    email: '',
                    password: '',
                    password_confirm: '',
                    name: '',
                    code_mobile_id: '',
                    code_mobile_val: '',
                    code_email_id: '',
                    code_email_val: '',

                },
                registerFormErrors: {
                    account: '',
                    mobile: '',
                    email: '',
                    password: '',
                    password_confirm: '',
                    name: '',
                    captcha_sms: '',
                    captcha_email: '',

                },
                guardConfig: {},

                rules: {
                    account: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {validator: LeValidator.validatePasswordStrong, trigger: 'blur'}
                    ],
                    password_confirm: [
                        {required: true, message: '请重复密码', trigger: 'blur'},
                        {validator: validatePasswordConfirm, trigger: 'blur'}
                    ],


                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: validateMobileIfNotNull, trigger: 'blur'}
                    ],
                    code_mobile_val: [
                        {required: true, message: '请输入手机验证码', trigger: 'change'},
                    ],
                    email: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {validator: validateEmailIfNotNull, trigger: 'blur'}
                    ],
                    code_email_val: [
                        {required: true, message: '请输入邮箱验证码', trigger: 'blur'},
                    ],

                }
            }
        },
        computed: {
            registerNeedMobile: function () {
                return LeUtils.valueGet(this.guardConfig, 'register_need_mobile', false);
            },
            registerCheckMobile: function () {
                return this.registerNeedMobile
                    && LeUtils.valueGet(this.guardConfig, 'register_check_mobile', false)
                    && LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false);
            },
            registerNeedEmail: function () {
                return LeUtils.valueGet(this.guardConfig, 'register_need_email', false);
            },
            registerCheckEmail: function () {
                return this.registerNeedEmail
                    && LeUtils.valueGet(this.guardConfig, 'register_check_email', false)
                    && LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false);
            },
        },
        async created() {
            let _this = this;
            if (!LeUtils.isEmpty(_this.dataGuardConfig)) {
                _this.guardConfig = _this.dataGuardConfig;
            } else {
                await ApiAuth.loadConfig(_this.authGuard).then(function (data) {
                    _this.guardConfig = data;
                })
            }

        },
        destroyed() {

        },
        mounted() {
            let _this = this

        },
        methods: {
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },

            authRegister: function () {
                let _this = this;
                this.$refs['registerForm'].validate((valid) => {
                    if (valid) {
                        _this.registerFormData.guard = _this.authGuard;
                        //console.log(this.registerFormData);
                        ApiAuth.register(_this.registerFormData)
                            .then(function (data) {
                                _this.$message.success('注册成功');
                                _this.$refs['registerForm'].resetFields();
                                _this.$emit('registered');

                            })
                            .catch(function (error) {
                                _this.registerFormErrors = LeUtils.valueGet(error, 'response.data.errors', {});
                            })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });


            },

        }
    }
</script>
